﻿@using Pyramid.Mvc.Html
@{
	var date = DateTime.Now;
}

<div class="pageHeader">
	<div class="searchBar">
		<table class="searchContent">
			<tr>
				<td>年份：</td>
				<td>@Html.DropDownListForRange("year", 2010, date.Year, date.Year)</td>
				<td>
					<div class="buttonActive">
						<div class="buttonContent">
							<button id="startProceedsStatisticButton">开始统计</button>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="pageContent">
	<div layouth="38">
		<div>
			<div id="pieChart" style="width:750px;"></div>
			<div id="lineChart" style="width: 750px;"></div>
		</div>
	</div>
</div>
<script>
	$(function() {
		$("#startProceedsStatisticButton").click(function() {
			startProceedsStatistic();
		});

		function startProceedsStatistic() {
			$("#pieChart").html("");
			$("#lineChart").html("");
			var year = $("#year").val();
			$.when($.ajax({ url: '/Proceeds/Gather1', data: { year: year } }), $.ajax({ url: '/Proceeds/Gather2', data: { year: year } }))
				.done(function (data1, data2) {
					
					if (!data1[0].pieData || data1[0].pieData.length == 0 || !data2[0].chartData || data2[0].chartData.length == 0) {
						alert("您所选择的年份没有数据！");
						return;
					}

					/* Title settings */
					var title = "年度收款组成分布情况";
					var titleXpos = 390;
					var titleYpos = 85;

					/* Pie Data */
					var pieRadius = 130;
					var pieXpos = 150;
					var pieYpos = 180;
					var pieData = data1[0].pieData;
					var pieLegend = data1[0].pieLegend;
					var pieLegendPos = "east";

					var r = Raphael("pieChart");

					r.text(titleXpos, titleYpos, title).attr({ "font-size": 20 });

					var pie = r.piechart(pieXpos, pieYpos, pieRadius, pieData, { legend: pieLegend, legendpos: pieLegendPos });
					pie.hover(function() {
						this.sector.stop();
						this.sector.scale(1.1, 1.1, this.cx, this.cy);
						if (this.label) {
							this.label[0].stop();
							this.label[0].attr({ r: 7.5 });
							this.label[1].attr({ "font-weight": 800 });
						}
					}, function() {
						this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
						if (this.label) {
							this.label[0].animate({ r: 5 }, 500, "bounce");
							this.label[1].attr({ "font-weight": 400 });
						}
					});

					//barchart
					var options = {
						legend: data2[0].legend,
						stacked: true,
						//gutter: 50,
						axis: "0 0 1 1", // Where to put the labels (trbl)
						axisystep: 10 // How many x interval labels to render (axisystep does the same for the y axis)
					};

					// Creates canvas
					var lineChart = Raphael("lineChart");
					var data = data2[0].chartData;

					var chart1 = lineChart.barchart(60, 10, 600, 300, data, options).hover(function() {
						this.flag = lineChart.popup(this.bar.x, this.bar.y, this.bar.value).insertBefore(this);
					}, function() {
						this.flag.animate({ opacity: 0 }, 500, ">", function() { this.remove(); });
					});
					chart1.label(["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], false);

				});
		}
	});
</script>